import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Layout, Menu, Button, Drawer } from 'antd';
import { MenuOutlined, HomeOutlined, BookOutlined, SmileOutlined, BulbOutlined, CoffeeOutlined, UserOutlined } from '@ant-design/icons';

const { Header } = Layout;

/**
 * 导航栏组件
 * 提供网站的主要导航功能，包含响应式设计和滚动效果
 */
const Navbar = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [visible, setVisible] = useState(false);
  const location = useLocation();

  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 20) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  // 导航项
  const navItems = [
    {
      key: '/',
      icon: <HomeOutlined />,
      label: <Link to="/">首页</Link>,
    },
    {
      key: '/articles',
      icon: <BookOutlined />,
      label: <Link to="/articles">我的文章</Link>,
    },
    {
      key: '/life',
      icon: <SmileOutlined />,
      label: <Link to="/life">生活点滴</Link>,
    },
    {
      key: '/notes',
      icon: <BulbOutlined />,
      label: <Link to="/notes">学习笔记</Link>,
    },
    {
      key: '/projects',
      icon: <CoffeeOutlined />,
      label: <Link to="/projects">个人项目</Link>,
    },
    {
      key: '/about',
      icon: <UserOutlined />,
      label: <Link to="/about">关于我</Link>,
    },
  ];

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  return (
    <Header 
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled 
          ? 'navbar-scrolled' 
          : 'bg-gradient-custom-1'
      }`}
      style={{ 
        padding: '0 20px',
        height: '64px',
        lineHeight: '64px',
        background: isScrolled ? 'rgba(255, 255, 255, 0.9)' : 'linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef)'
      }}
    >
      <div className="container mx-auto flex items-center justify-start h-full">
        {/* 移动端菜单按钮 */}
        <div className="md:hidden">
            <Button
              type="text"
              icon={<MenuOutlined style={{ color: isScrolled ? '#1f2937' : 'white', fontSize: '18px' }} />}
              onClick={showDrawer}
              style={{ border: 'none', background: 'transparent' }}
            />
        </div>

        {/* 桌面导航菜单 */}
        <div className="hidden md:flex items-center" style={{margin:'-66px 0 0 28px'}}>
          <Menu
            mode="horizontal"
            selectedKeys={[location.pathname]}
            items={navItems}
            style={{ 
              background: 'transparent',
              borderBottom: 'none',
              color: isScrolled ? '#1f2937' : 'white',
              fontSize: '14px',
              lineHeight: '64px'
            }}
            className="border-0"
          />
        </div>
      </div>

      {/* 移动端抽屉菜单 */}
      <Drawer
        title="菜单"
        placement="right"
        onClose={onClose}
        open={visible}
        width={250}
      >
        <Menu
          mode="vertical"
          selectedKeys={[location.pathname]}
          items={navItems}
          style={{ border: 'none' }}
          onClick={onClose}
        />
      </Drawer>
    </Header>
  );
};

export default Navbar; 